<template>
  <div class="nav-item"
       :collapse="isCollapse">
    <el-row class="nav">
      <el-col>
        <el-menu class="el-menu-vertical-demo"
                 router
                 :collapse="isCollapse"
                 @open="handleOpen"
                 @close="handleClose">

          <el-submenu index="s1">
            <template slot="title">
              <i class="el-icon-edit-outline"></i>
              <span>发布</span>
            </template>
            <el-menu-item v-if="Modeladd"
                          v-for="item in Modeladd"
                          :index="'/article/add/'+item.id"
                          :key="item.id">{{item.typename}}</el-menu-item>

          </el-submenu>
          <el-submenu index="8">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">栏目管理</span>
            </template>
            <template v-for="item in contents">
              <!--1 v-if -->
              <template v-if="item.children && item.children.length>0">

                <el-submenu :index="item.id"
                            :key="item.id">
                  <span slot="title"
                        :index="item.id"> {{item.typename}}</span>
                  <template v-for="item in item.children">
                    <template v-if="item.children && item.children.length>0">
                      <!--2 v-if -->
                      <el-submenu :index="item.id"
                                  :key="item.id">
                        <span slot="title"> {{item.typename}}</span>
                        <template v-for="item in item.children">
                          <!--3 v-for -->
                          <el-menu-item :index="'/channel/'+item.id"
                                        :key="item.id">{{item.typename}}</el-menu-item>
                        </template>
                        <!--over 3 v-for -->
                      </el-submenu>
                    </template>
                    <!--over 2 v-if -->
                    <template v-else>
                      <el-menu-item :index="'/channel/'+item.id"
                                    :key="item.id">{{item.typename}}</el-menu-item>
                    </template>
                  </template>
                  <!--over 2 v-for -->
                </el-submenu>
              </template>
              <!--over 1 v-if -->
              <template v-else>
                <el-menu-item :index="'/channel/'+item.id"
                              :key="item.id">{{item.typename}}</el-menu-item>
              </template>
            </template>
          </el-submenu>
          <el-menu-item index="index">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>

          </el-menu-item>
          <el-menu-item index="3"
                        disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { contentlists } from '../../axios/api'
export default {
  name: 'navs',
  data () {
    return {
      Modeladd: [],
      contents: [],
      index: [1, 2],
      sidebarcolor: ''
    }
  },
  computed: {
    ...mapState({
      isActive: state => state.app.sidebar.opened,
      sidebar: state => state.app.sidebar
    }),
    isCollapse () {
      return this.sidebar.opened
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  },
  mounted () {
    // console.log(this.token)
    contentlists().then(res => {
      if (res.data.state === 1) {
        this.Modeladd = res.data.data.Modeladd
        this.contents = res.data.data.content
      }
    })
  }
}
</script>

<style lang='less' scoped>
.el-submenu {
  li {
    .transition(0.5s);
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 220px;

  height: 100%;
}
.el-aside {
  height: 100%;
  .nav {
    height: 100%;
  }
  .el-menu {
    border-right: none;
    .transition(0.5s);
    background-color: transparent;
    * {
      .transition(0.5s);
    }
  }
}
</style>
